<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";
import Deploy from '../markdown/deploy.md';
const route = useRoute()
const active = ref("simple")
const scrollbar = ref(null)
const handle = (e) => {
  let target = document.getElementById(e.props.name).offsetTop
  scrollbar.value.setScrollTop(target);
}
const scroll = ({scrollTop}) => {
  let simpleHeight = document.getElementById("simple").offsetTop
  let serverHeight = document.getElementById("server").offsetTop
  let clientHeight = document.getElementById("client").offsetTop
  let agentHeight = document.getElementById("agent").offsetTop
  let iosHeight = document.getElementById("ios").offsetTop
  if (scrollTop > simpleHeight && scrollTop <= serverHeight - 50) {
    active.value = 'simple';
  } else if (scrollTop > serverHeight - 50 && scrollTop <= clientHeight - 50) {
    active.value = 'server'
  } else if (scrollTop > clientHeight - 50 && scrollTop <= agentHeight - 50) {
    active.value = 'client'
  } else if (scrollTop > agentHeight - 50 && scrollTop <= iosHeight - 50) {
    active.value = 'agent'
  } else if (scrollTop > iosHeight - 50) {
    active.value = 'ios'
  }
}
</script>
<template>
  <el-backtop target=".demo-tree-scrollbar .el-scrollbar__wrap"></el-backtop>
  <el-scrollbar class="demo-tree-scrollbar" ref="scrollbar" style="height: 100%" @scroll="scroll">
    <div class="back">
      <el-tabs @tab-click="handle" v-model="active" tab-position="left" style="position: absolute; height:100%;text-align: left;
  margin-right: 30px">
        <el-tab-pane label="快速搭建" name="simple">
        </el-tab-pane>
        <el-tab-pane label="后端部署" name="server">
        </el-tab-pane>
        <el-tab-pane label="前端部署" name="client">
        </el-tab-pane>
        <el-tab-pane label="Agent端部署" name="agent">
        </el-tab-pane>
        <el-tab-pane label="iOS设备接入" name="ios">
        </el-tab-pane>
      </el-tabs>
      <deploy style="text-align: left;margin-left: 150px"/>
    </div>
  </el-scrollbar>
</template>